<template>
  <el-empty :description="emptyInfo.description" :image="emptyInfo.image" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElEmpty } from 'element-plus'

const props = defineProps<{
  chartStatus: 'loading' | 'noData' | 'error' | 'unauthorized' | string
}>()

const emptyInfo = computed(() => {
  switch (props.chartStatus) {
    case 'loading':
      return {
        description: '图表加载中...',
        image: '' // 示例加载图
      }
    case 'noData':
      return {
        description: '暂无数据',
        image: ''
      }
    case 'error':
      return {
        description: '图表加载失败，请稍后重试',
        image: ''
      }
    case 'taskError':
      return {
        description: '图表数据配置异常',
        image: ''
      }
    default:
      return {
        description: props.chartStatus,
        image: ''
      }
  }
})
</script>
